<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
		<style>
			*{margin:0px;padding:0px;}
			body{background:#000;overflow:hidden;}
			div{position:absolute;left:400px;top:30px;border-radius:50%;}
		</style>
	</head>
	<body>
		<script src="js/jquery.js"></script>
		<script>
			//alert($);
			$(document).click(function(e){
				var div = $("<div></div>")
				div.css({width:"10px",height:"40px",background:color()});
				$("body").append(div);
				var h = $(document).height();
				var w = $(document).width();
				var x = e.clientX;
				var y = e.clientY;
				div.css({left:x,top:h});
				div.animate({top:y},1000,function(){
					$(this).remove();

					var _div = [];
					for(i=0;i<100;i++){//for循环生成100个烟花碎片
						_div[i] = $("<div></div>");
						_div[i].css({width:"3px",height:"3px",background:color(),
						left:x,top:y});
						$("body").append(_div[i]);
						_div[i].speedX = Math.random()*20-10;//设置X轴的速度
						_div[i].speedY = Math.random()*20-10;//设置Y轴的速度
					};
					setInterval(function(){
						for(j=0;j<100;j++){
							if(!_div[j]) continue;//判断碎片是否存在，不存在继续下一个
							_div[j].css({left:_div[j].position().left+_div[j].speedX,top:_div[j].
							position().top+_div[j].speedY});//动态的改变碎片的坐标值
							_div[j].speedY = _div[j].speedY+1;//让碎片往下跑
							
							if(_div[j].position().top>h||_div[j].position().left<0
							||_div[j].position().left>w)
							{
								_div[j].remove();//去除到达浏览器边界的烟花碎片
								_div[j].null;//清空数组
							}
						}
					},50);

				});
				
			});
			function color(){//随机产生颜色
				return "#"+(function(h){
			return new Array(7-h.length).join("0")+h})((Math.random()*0x1000000<<0).toString(16))
					
				
			}
		</script>
	</body>
</html>
